<template>
    <view class="bottom-nav">
        <view class="nav-item" :class="{ active: currentPage === 'home' }" @click="navigateTo('home')">
            <image class="nav-icon" :src="currentPage === 'home' ? icons.homeActive : icons.home" />
            <text :class="{ active: currentPage === 'home' }">首页</text>
        </view>
        <view v-if="chat" class="nav-item" :class="{ active: currentPage === 'chatList' }"
            @click="navigateTo('chatList')">
            <image class="nav-icon" :src="currentPage === 'chatList' ? icons.newsActive : icons.news" />
            <text :class="{ active: currentPage === 'chatList' }">消息</text>
        </view>
        <view class="nav-item" :class="{ active: currentPage === 'my' }" @click="navigateTo('my')">
            <image class="nav-icon" :src="currentPage === 'my' ? icons.myActive : icons.my" />
            <text :class="{ active: currentPage === 'my' }">我的</text>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            currentPage: {
                type: String,
                required: true
            }
        },
        mounted() {
            this.chat = this.f.storage('switchCfg').module.dating.chat
            console.log(this.chat);

        },
        data() {
            return {
                chat: false,
                icons: {
                    home: "https://cdn1.sanyedu.com/static/icons/home.png",
                    homeActive: "https://cdn1.sanyedu.com/static/icons/home_selected.png",
                    news: "https://cdn1.sanyedu.com/static/icons/news.png",
                    newsActive: "https://cdn1.sanyedu.com/static/icons/news_selected.png",
                    my: "https://cdn1.sanyedu.com/static/icons/my.png",
                    myActive: "https://cdn1.sanyedu.com/static/icons/my_selected.png"
                }
            };
        },
        methods: {
            navigateTo(page) {
                if (page === this.currentPage) return;
                if (page === "home") {
                    uni.navigateTo({ url: "/subPackage1/marriageHelp/marriageHelp" });
                } else if (page === "my") {
                    uni.navigateTo({ url: "/subPackage1/marriageMy/marriageMy" });
                } else if (page === "chatList") {
                    uni.navigateTo({ url: "/subPackage1/chatList/chatList" });
                }
            }
        }
    };
</script>

<style>
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background-color: #ffffff;
        /* border-top: 1px solid #eaeaea; */
        display: flex;
        box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.05);
        justify-content: space-around;
        align-items: center;
        z-index: 100;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        font-size: 24rpx;
        color: #666;
    }

    .nav-item.active {
        color: #a55fee;
    }

    .nav-icon {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 5rpx;
    }
</style>